import React, { Component } from 'react'
import {connect} from "react-redux"
import {debounce,throttle} from "lodash"
import * as action from "../action/index.js"
import {bindActionCreators} from "redux"
import Fenyeqi from "./fenye"
import { Popconfirm, message } from 'antd';
import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
const styele = {
    marginLeft:"30px"
}
const { Option } = Select;
 class Fenye extends Component {
   state = {
       visible: false ,
       index:1, // 默认第一页
       total:0, // 总页数
       arr:[] , // 渲染页码用的空数组
       from1:{
        name1:"",
        date:"",
        address:""
      }
   }
 componentDidMount(){
    this.props.getList()
   setTimeout(()=>{
       this.setState({
           total:Math.ceil(this.props.arr.length/5) // 设置了一共有多少页
       })
       // 只要在延时器里this.setSate就变成同步得了
       console.log(this.state.total)
       let crr = [];
       for(let i =1;i<=this.state.total;i++) {
           crr.push(i)
       }
       console.log(crr)
       this.setState({
        arr:crr
       })
   },100)

  }
  checkIndex(ind){
    this.setState({
        index:ind
    })
  }
  // 子组件给父组件传参得方法
  zichuanfu =(data)=>{
        this.setState({
            index:data
        })
  }
  confirm(e,ind){
    console.log(e,ind);
    this.props.delFN(ind)
    message.success('Click on Yes');
  }
  cancel(e){
    console.log(e);
    message.error('Click on No');
  }
  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };
  onClose1 = () => { // 抽屉得提交事件
    this.props.editFn(this.state.from1)
    this.setState({
      visible: false,
    });
  };
  openDrawer(ind,item){  //点击编辑得事件
    this.setState({
        visible: true,
        from1:item
      });
  }
  checkname(e){
    let from1 = this.state.from1
    from1.name1 = e.target.value
    this.setState({
      from1
    })
 }
 // 获取date得input框的值
 checkdate(e){
  let from1 = this.state.from1
  from1.date = e.target.value
  this.setState({
    from1
  })
}
checkaddress(e) {
let from1 = this.state.from1
from1.address = e.target.value
this.setState({
  from1
})
}
  render() {
    // slice 截取含头不含尾，而且括号里传的是下标，返回新数组，不影响原来的数组 第一个参数（第几页-1）*每页几条 ，第二个参数就是（第几页）*每页几条
     let list = this.props.arr.slice((this.state.index-1)*5,this.state.index*5) // 每次截取得那得哪一条到哪一条
     console.log(this.state.total)
     console.log(list)
     console.log(this.state.arr,1111)
    return (
      <div>
         {/* 表格主体 */}
         {
             list&&list.length?list.map((item,index)=>{
                 return (
                     <div key={index}>
                        <span>{item.name1}</span>
                        <span>{item.date}</span>
                        <span>{item.address}</span>
                        <button style={styele} onClick={this.openDrawer.bind(this,index,item)}>编辑</button>
                        {/* <button style={styele}>删除</button> */}
                        <Popconfirm
                            title="你确定要删除吗?"
                            onConfirm={this.confirm.bind(this,index)}
                            onCancel={this.cancel.bind(this)}
                            okText="确定"
                            cancelText="取消"
                        >
                            <a href="#">Delete</a>
                         </Popconfirm>
                     </div>
                 )
             }):""
         }

         {/* 分液器 */}
        {/* {
            this.state.arr&&this.state.arr.length? this.state.arr.map((item,index)=>{
                return <span key={index} onClick={this.checkIndex.bind(this,item)} className={item==this.state.index?"active":""}>{item}</span>
            }):""
        } */}
        {/* 第一个，子组件需要把点击得页码传给父组件 ，子组件给父组件传参，需要在父组件定义一个方法传递给子组件，子组件触发父组件传递过去的方法，将参数传到父组件得形参里
            改变父组件分页列表渲染所要截取得值，从而实现子组件点击分页器父组件得页码渲染得内容改变
        */}
        {
            // 第二个参数传的是父组件里当前应该高亮第几页，目的是让分页器组件里循环得页码和他匹配，从而正确实现高亮
        }
        <Fenyeqi chengePage={this.zichuanfu} indexActive={this.state.index}></Fenyeqi>
        {/* 抽屉组件 */}
        <Drawer
          title="Create a new account"
          width={720}
          onClose={this.onClose}
          visible={this.state.visible}
          bodyStyle={{ paddingBottom: 80 }}
          extra={
            <Space>
              <Button onClick={this.onClose}>Cancel</Button>
              <Button onClick={this.onClose1} type="primary">
                Submit
              </Button>
            </Space>
          }
        >
          <Form layout="vertical" hideRequiredMark>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                //   name="name"
                  label="Name"
                  rules={[{ required: true, message: 'Please enter user name' }]}
                >
                 <Input placeholder="Please enter user name" onChange={this.checkname.bind(this)} value={this.state.from1.name1} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                //   name="name"
                  label="Name"
                  rules={[{ required: true, message: 'Please enter user name' }]}
                >
                 <Input placeholder="Please enter user date"  onChange={this.checkdate.bind(this)} value={this.state.from1.date}/>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                //   name="name"
                  label="Name"
                  rules={[{ required: true, message: 'Please enter user name' }]}
                >
                  <Input placeholder="Please enter user name" onChange={this.checkaddress.bind(this)} value={this.state.from1.address}/>
                </Form.Item>
              </Col>
            </Row>
        
          </Form>
        </Drawer>

      </div>
    )
  }
}
let mapStateToprops = (state)=>{
    console.log(state)
      return {
          ...state.antdReducer
      }
}
let mapDispatchToprops =(disptach)=>bindActionCreators(action,disptach)
export default connect(mapStateToprops,mapDispatchToprops)(Fenye)